<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Preload example</title>
    <script class="code" src="../../contrib/akamai/controlbar/ControlBar.js"></script>
    <script src="../../dist/modern/umd/dash.all.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
    <link href="../lib/main.css" rel="stylesheet">

    <style>
        video {
            width: 100%;
        }

        .dash-video-player {
            position: relative; /* This position relative is needed to position the menus */
            margin: 0 auto;
            line-height: 1.0;
        }
    </style>

    <script class="code">
        var video,
            player,
            ttmlRenderingDiv;

        function init() {
            var url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';

            player = dashjs.MediaPlayer().create();
            player.initialize(null, url, true);
            player.updateSettings({
                debug: {logLevel: 5},
                streaming: {cacheInitSegments: true}
            });
            player.preload();
        }

        function attachVideoPlayer() {
            if (!video) {
                video = document.getElementById('video-element')
            }

            player.attachView(video);
            ttmlRenderingDiv = document.querySelector('#ttml-rendering-div');
            player.attachTTMLRenderingDiv(ttmlRenderingDiv);
            var controlbar = new ControlBar(player);
            controlbar.initialize()
        }
    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 alt="dashjs logo"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-4">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>Preload content</h3>
                    <p>This example shows how to use preload feature of dash.js, which allows to initialize streaming
                        and start downloading the content before the player is attached to an HTML5 video element. This
                        feature can be used to optimize content-insertion on platforms which provide only a single
                        decoder.</p>
                    <p>When this page is loaded, dash.js downloads media segments into a virtual buffer. Once the
                        "Attach View" button is clicked, a video element is attached to dash.js and the downloaded data
                        will be appended to the newly created
                        Source Buffers.</p>
                    <p>Note that for this feature to work "cacheInitSegments" must be activated.</p>
                </div>
            </div>
            <div class="col-md-8">
                <div class="dash-video-player code">
                    <div class="videoContainer" id="videoContainer">
                        <video id="video-element"></video>
                        <div id="ttml-rendering-div"></div>
                        <div id="videoController" class="video-controller unselectable">
                            <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
                                <span id="iconPlayPause" class="icon-play"></span>
                            </div>
                            <span id="videoTime" class="time-display">00:00:00</span>
                            <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
                                <span class="icon-fullscreen-enter"></span>
                            </div>
                            <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
                                <span class="icon-bitrate"></span>
                            </div>
                            <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
                            <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
                                <span id="iconMute" class="icon-mute-off"></span>
                            </div>
                            <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
                                <span class="icon-tracks"></span>
                            </div>
                            <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
                                <span class="icon-caption"></span>
                            </div>
                            <span id="videoDuration" class="duration-display">00:00:00</span>
                            <div class="seekContainer">
                                <div id="seekbar" class="seekbar seekbar-complete">
                                    <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
                                    <div id="seekbar-play" class="seekbar seekbar-play"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button onclick="attachVideoPlayer()">Attach View</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>
